<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>
        <ui:composition template="./main-template.xhtml">
                <ui:param name="titulo" value="Administracion de Cliente" />
                <ui:define name="body">
                    <a4j:form>
                    <rich:simpleTogglePanel id="stpEdicion" opened="true">
                    <rich:panel>
                            <h:panelGrid columns="2" columnClasses="top,top">
                                <h:outputLabel value="Tipo de documento" />
                                <h:selectOneMenu value="#{ClientsBean.client.tipoDocumento}">
                                    <f:selectItems value="#{ClientsBean.tiposDocumento}" />
                                </h:selectOneMenu>
                                <h:outputLabel id="numero" value="Numero de documento" />
                                <h:inputText  value="#{ClientsBean.client.numeroDocumento}" />
                                <h:outputLabel value="Nombre completo del cliente" />
                                <h:inputText label="Nombre Cliente" value="#{ClientsBean.client.nombreCliente}" />
                                <h:outputLabel value="Telefono de residencia" />
                                <h:inputText label="Telefono Fijo" value="#{ClientsBean.client.telefonoFijo}" />
                                <h:outputLabel value="Telefono celular" />
                                <h:inputText value="#{ClientsBean.client.telefonoCelular}" />
                                <h:outputLabel value="Ciudad de residencia" />
                                <h:inputText label="Ciudad de residencia" value="#{ClientsBean.client.ciudad}" />
                                <h:outputLabel value="Departamento" />
                                <h:inputText value="#{ClientsBean.client.departamento}" />
                                <h:outputLabel value="Pais" />
                                <h:inputText value="#{ClientsBean.client.pais}" />
                                <h:outputLabel value="Profesion" />
                                <h:inputText value="#{ClientsBean.client.profesion}" />
                                <h:outputLabel value="Email" />
                                <h:inputText value="#{ClientsBean.client.email}" />
                            </h:panelGrid>
                            <h:panelGrid columns="2">
                                <a4j:commandButton value="Add" action="#{ClientsBean.add}" reRender="tblClients, stpEdicion" />
                                <h:commandButton value="New"  type="reset"   />
                            </h:panelGrid>
                    </rich:panel>
                    </rich:simpleTogglePanel>
                    </a4j:form>
                    <a4j:form>
                        <rich:panel id="panelTabla">
                        <rich:extendedDataTable id="tblClients" value="#{ClientsBean.clients}" var="cr">
                        <rich:column filterBy="#{cr.tipoDocumento}" sortBy="#{cr.tipoDocumento}" label="Tipo de documento">
                            <f:facet name="header">
                                Tipo
                            </f:facet>
                            #{cr.tipoDocumento}
                        </rich:column>
                        <rich:column filterBy="#{cr.numeroDocumento}" sortBy="#{cr.numeroDocumento}" label="Numero de documento">
                            <f:facet name="header">
                                Numero
                            </f:facet>
                            #{cr.numeroDocumento}
                        </rich:column>
                        <rich:column filterBy="#{cr.nombreCliente}" sortBy="#{cr.nombreCliente}" label="Nombre de Cliente">
                            <f:facet name="header">
                                Nombre
                            </f:facet>
                            #{cr.nombreCliente}
                        </rich:column>
                        <rich:column filterBy="#{cr.telefonoFijo}" sortBy="#{cr.telefonoFijo}" label="Telefono Fijo">
                            <f:facet name="header">
                                Telefono
                            </f:facet>
                            #{cr.telefonoFijo}
                        </rich:column>
                        <rich:column filterBy="#{cr.telefonoCelular}" sortBy="#{cr.telefonoCelular}" label="Telefono Celular">
                            <f:facet name="header">
                                Celular
                            </f:facet>
                            #{cr.telefonoCelular}
                        </rich:column>
                        <rich:column filterBy="#{cr.telefonoCelular}" sortBy="#{cr.telefonoCelular}" label="Telefono Celular">
                            <f:facet name="header">
                                Email
                            </f:facet>
                            #{cr.email}
                        </rich:column>
                        <rich:column width="114" label="op" >
                            <f:facet name="header" >
                                Operaciones
                            </f:facet>
                            <a4j:commandLink title="Editar" action="editarCliente" immediate="true">
                                        <f:setPropertyActionListener value="#{cr}" target="#{ClientsBean.client}"/>
                                        <h:graphicImage url="/img/edit.gif" styleClass="icon"/>
                            </a4j:commandLink>
                            <rich:spacer width="3" />
                            <a4j:commandLink title="Eliminar" action="#{ClientsBean.delete}" immediate="true" reRender="panelTabla">
                               <f:setPropertyActionListener value="#{cr}" target="#{ClientsBean.client}"/>
                                <h:graphicImage url="/img/del.gif" styleClass="icon"/>
                            </a4j:commandLink>
                        </rich:column>
                    </rich:extendedDataTable>
                    </rich:panel>
                    </a4j:form>
                </ui:define>
            </ui:composition>
    </body>
</html>

